window.addEventListener("load", function () {
	// 导航列表绑定移入事件
	mousecolor($("header li"), "#ed510a", "white");

	//导航登录、注册按钮
	mousecolor(
		$("header .login span:first-child"),
		"#0e61d0",
		"#fff",
		"#fff",
		"#0e61d0"
	);
	mousecolor(
		$("header .login span:last-child"),
		"#ed510a",
		"#fff",
		"#fff",
		"#ed510a"
	);

	// 导航列表跳转
	$("header ul .API").addEventListener("click", function () {
		window.location.href = "../html/APIindex.html";
	});

	//立即体验按钮
	// console.log($("#adv p"));
	mousecolor($("#adv p"), "#0e61d0", "#fff", "#fff", "#0e61d0");

	// 给尾部相关链接添加交互效果
	mousecolor($("footer li a"), "#0e61d0", "#807570");

	//功能一: 海量API区移入移出交互
	//思路:
	//1.获取相关节点
	//$("#apiList li")
	//2.给li绑定移入和移出事件
	let oldUrl = ""; //变量提升
	$(".apiList li").forEach(function (v) {
		// 2-1. 移入事件
		v.addEventListener("mouseover", function () {
			//2-1-1.背景色蓝色
			this.style.backgroundColor = "#0e61d0";
			// 2-1-2.字体变白
			this.style.color = "#fff";
			// 2-1-3.切换透明的图片
			// 将图片的后缀名前加一个-c,api01.svg => api01-c.svg
			let imgUrl = this.firstElementChild.firstElementChild.src;
			console.log(this.firstElementChild.firstElementChild.src);
			let str = imgUrl.slice(imgUrl.lastIndexOf("."));
			this.firstElementChild.firstElementChild.src = imgUrl.replace(
				str,
				"-c.svg"
			);
			oldUrl = imgUrl; // 用一个变量保存原先的路径
		});
		// 3-1. 移出事件
		v.addEventListener("mouseout", function () {
			// 3-1-1. 背景色变白
			this.style.backgroundColor = "#fff";
			// 3-1-2. 文字变黑
			this.style.color = "#000";
			// 3-1-3. 切换为原先的图片
			this.firstElementChild.firstElementChild.src = oldUrl;
		});
	});

	// 功能二: 独角兽轮播图
	// 思路: 将多个图文结构unicorncont全部叠加在一个区域, 每隔3s让一个显示, 其他不显示
	// 1. 获取相关节点
	const unicornCont = $(".unicornCont");
	unicornCont[0].style.opacity = "1"; // 默认显示第0个
	let index = 1; // 设置索引变量
	// 2. 设置周期定时器每隔3S轮换显示
	this.window.setInterval(function () {
		// 3. 排他思想, 无论是谁先显示, 首先清空所有
		unicornCont.forEach(function (v) {
			v.style.opacity = "0";
		});
		// 4. 通过索引显示对应内容, 其他不显示
		unicornCont[index].style.opacity = "1";
		// 5. 每隔一个周期索引变量++
		index++;
		// 6. 当索引值到达最大值时重置
		if (index > unicornCont.length - 1) {
			index = 0;
		}
	}, 3000);

	// 回到顶部侧边栏
	//获取相关节点
	const asideNode = $("aside");
	// 滚动条滚动到大于300px位置时显示出来, 小于300px隐藏
	window.addEventListener("scroll", function () {
		if (window.scrollY >= 300) {
			asideNode.style.transition = "opacity 1s";
			asideNode.style.opacity = 1;
			asideNode.style.cursor = "pointer";
		} else {
			asideNode.style.transition = "opacity 1s";
			asideNode.style.opacity = 0;
			// asideNode.style.zIndex = "0";
		}
	});
	console.dir(asideNode);

	//点击回到开发者
	const scrollCloud = $("aside li:first-child");
	scrollCloud.addEventListener("click", function () {
		window.scrollTo({ left: 0, top: 676, behavior: "smooth" });
	});

	// 点击回到海量API;
	const scrollAPI = $("aside li:nth-child(2)");
	scrollAPI.addEventListener("click", function () {
		window.scrollTo({ left: 0, top: 1306, behavior: "smooth" });
	});

	// 点击回到慧集;
	const scrollMaster = $("aside li:nth-child(3)");
	scrollMaster.addEventListener("click", function () {
		window.scrollTo({ left: 0, top: 1946, behavior: "smooth" });
	});

	// 点击回到独角兽;
	const scrollUnicorn = $("aside li:nth-child(4)");
	scrollUnicorn.addEventListener("click", function () {
		window.scrollTo({ left: 0, top: 2789, behavior: "smooth" });
	});

	// 点击回到数据安全;
	const scrollSafe = $("aside li:nth-child(5)");
	scrollSafe.addEventListener("click", function () {
		window.scrollTo({ left: 0, top: 3309, behavior: "smooth" });
	});

	//点击最后一个li回到顶部
	const scrollTop = $("aside li:last-child");
	scrollTop.addEventListener("click", function () {
		window.scrollTo({ left: 0, top: 0, behavior: "smooth" });
	});

	//给侧边栏添加鼠标移入移出效果
	mousecolor($("aside li"), "#fff", "#000", "#0e61d0", "#f8fbfe");
	mousecolor($("aside li:last-child"), "#fff", "#0e61d0", "#0e61d0", "#f8fbfe");

	//如果你初始化时没有定义Swiper实例，后面也可以通过Swiper的HTML元素来获取该实例
	new Swiper(".swiper");
	var mySwiper = document.querySelector(".swiper").swiper;
	mySwiper.slideNext();

	var mySwiper = new Swiper(".swiper", {
		autoplay: true, //可选选项，自动滑动
		//分页器 (即下面的小圆点)
		pagination: {
			el: ".swiper-pagination", // 开启分页器
			clickable: true, // 开启点击功能
		},
	});
});
